<template>
  <div>
    <!-- Logo -->
    <div :class="{'homePage': !pokemonData}">
      <div class="text-center font-bold logo" v-show="!pokemonData">
        <span class="text-logo">Pokemon </span>
        <img height="55" src="../assets/大师球.png" alt="logo">
        <span class="text-logo"> 宝可梦百科</span>
      </div>
      <!-- 搜索框 -->
      <pokemon-input class="margin-20" :setInfo="getInfoWithInput"/>
      <hr :class="{'homePage': !pokemonData}">
    </div>

    <!-- 路由跳转 -->
    <router-view :pokemonData="pokemonData" :setCurrentPokemon="getCurrentPokemon" :pokemon="currentPokemon"/>
  </div>
</template>

<script>
import PokemonSearchResult from './PokemonSearchResult.vue'
import PokemonInput from './PokemonInput.vue'
import PokemonPage from './PokemonPage.vue'

export default {
  name: 'HelloWorld',
  components: { 
    PokemonInput,
    PokemonSearchResult,
    PokemonPage,
  },
  data(){
    return{
      pokemonData: null,
      currentPokemon: null,
    }
  },
  methods:{
    /* 通过子组件PokemonInput获取数据，
        作为props传给PokemonInput并在输入框回车时调用 */
    getInfoWithInput(data){
      this.pokemonData = data;
      this.currentPokemon = null;
    },

    /* 通过子组件PokemonSearchResult获取用户点击的宝可梦信息，
        作为props传给PokemonSearchResult并在点击时调用 */
    getCurrentPokemon(pokemon){
      this.currentPokemon = pokemon;
    }
  },
}

</script>

<style lang="less" scoped>

hr {
  margin-top: 20px;

  &.homePage {
    display: none;
  }
}

div.homePage {
  margin-top: 35vh;
  transition: margin-top 1s;

  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.text-logo {
  font-family: '像素风字体';
}

@media screen and (max-width: 600px) {
    div.homePage:hover {
      margin-top: 5vh;
    }
}



.text-logo {
  color: rgba(205, 235, 255, 0.9);
  text-shadow: 0px 0px 5px rgba(153, 0, 255, 0.8);
  vertical-align: 16px;
  font-size: 1.6rem;
  animation: 8s logoText infinite;
}
.logo img {
  opacity: .8;
}
.logo {
  margin-bottom: -5px;
}

@keyframes logoText {
  0%{text-shadow: 0px 0px 5px rgba(153, 0, 255, 1); opacity: 1;}
  50%{text-shadow: 0px 0px 5px rgba(0, 47, 255, 0.8); opacity: .6;}
  100%{text-shadow: 0px 0px 5px rgba(153, 0, 255, 1); opacity: 1;}
}
</style>
